<script setup>
import MoniterItem from "@/components/MoniterItem.vue";
import { onMounted, inject, reactive, ref, nextTick } from "vue";

const $axios = inject("$axios");
let searchDate =  ref('')

onMounted(() => {
  // getBackHomeCount();
});

function autoScroll() {
  const el = document.querySelector("#tableList1");
  const elHeight = el.offsetHeight;
  const sHeight = el.scrollHeight;
  setInterval(() => {
    if (el.scrollTop < sHeight - elHeight) {
      el.scrollTop++;
    } else {
      el.scrollTop = 0;
    }
  }, 100);
}

function openWindow() {
  window.open("https://bpmn.honqun.com/admin/#/yq/PersonBackHome")
}
function getBackHomeCount() {
  $axios
    .get("person_back_home/backHomeSum")
    .then((res) => {
      res.data.data.forEach((item) => {
        tableData.push({
          number: item.orders,
          palce: item.village,
          added: item.newToday,
          count: item.total,
          reded: item.reds,
          yellowed: item.yellows,
          quarantine: item.focus,
          home: item.home,
        });
      });
    })
    .then(nextTick)
    .then(() => {
      autoScroll();
    });
}

const tableData = reactive([
  // {
  //   number: "1",
  //   palce: "黄寨镇",
  //   added: "12",
  //   count: "22",
  //   reded: "34",
  //   yellowed: "44",
  //   quarantine: "34",
  //   home: "4344",
  // },
]);
</script>

<template>
  <MoniterItem title="返乡报备数据">
    <template #right>
        <!--
      <div @click="openWindow">更多》</div>
      -->
        <a href="/admin/#/yq/PersonBackHome" target="_blank" class="more">更多》</a>
    </template>
    <template #content>
      <div class="search-date">
        <text>统计截止日期：</text>
        <el-date-picker v-model="searchDate" type="date" placeholder="选择日期">
        </el-date-picker>
      </div>
      <div class="line" style="font-size: 14px;font-weight: 600">
        <div style="flex: 0.5">序号</div>
        <div style="flex: 1">乡镇名称</div>
        <div style="flex: 0.8">当日返乡</div>
        <div style="flex: 0.8">高铁站返乡</div>
        <div style="flex: 0.8">火车站返乡</div>
        <div style="flex: 0.8">汽车站返乡</div>
      </div>
      <div style="height: 90%; font-size: 14px; overflow: auto" id="tableList1">
        <div
          :class="{ line: true, lineColor: index % 2 === 1 }"
          v-for="(item, index) in tableData"
          :key="index"
          ref="tableRef"
        >
          <div style="flex: 0.5">{{ item.number }}</div>
          <div style="flex: 1">{{ item.palce }}</div>
          <div style="flex: 0.8">{{ item.added }}</div>
          <div style="flex: 0.8">{{ item.count }}</div>
          <div style="flex: 0.8">{{ item.reded }}</div>
          <div style="flex: 0.8">{{ item.yellowed }}</div>
        </div>
      </div>
    </template>
  </MoniterItem>
</template>

<style lang="less" scoped>
.search-date {
  text-align: right;

  text {
    font-size: 14px;
  }
}
a.more {
  color: #00f9ff;
  text-decoration: none;
}
.line {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
  div {
    text-align: center;
  }
}
.lineColor {
  background-color: #2a64b1;
}
</style>
